<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/华为官网.css">
</head>

<body>
    <!-- 顶部黑色导航 -->
    <div class="top">
        <img src="./img/header-linkgroup.png" align="middle" id="pic">
        <a href="">集团网站</a>
        <img src="./img/language.png" align="middle" id="pic">
        <a href="">选择区域/语言</a>
        <img src="./img/User Person Account Interface Login.png" align="middle" id="pic">
        <a href="" >登录</a>
    </div>
    <!-- 中间 -->
    <div class="mid">
        <!-- 导航栏 -->
        <div class="leader">
            <div class="leader-left">
                <img src="./img/huawei_logo.png">
            </div>
            <div class="leader-mid">
                    <a href="">个人及家庭产品</a>
                    <a href="">商用产品及方案</a>
                    <a href="">服务支持</a>
                    <a href="">合作伙伴与开发者</a>
                    <a href="">关于华为</a>
            </div>
            <div class="leader-right">
            <!-- align排列（对齐）方式 -->
                <a href=""><img src="./img/1.png" align="middle" id="one"></a>
                <a href="">在线购买</a>
                <a href=""><img src="./img/2.png" align="middle" id="two"></a>
            </div>
        </div>

    </div>
    <!-- 轮播图 -->
    <div class="slideshow">
        <img src="./img/500-companies-cn.jpg">
    </div>
    <!-- 推荐信息 -->
    <div class="rec">
        <h2>推荐信息</h2>
        <div class="imglist">
            <div class="one">
                <div class="title">                
                    <p>产品</p>
                    <p>HUAWEI P50 系列</p>  
                    <p>万象新生</p>  
                </div>
   
            </div>
            <div class="two">
                <div class="two-title">
                    <p>产品</p>
                    <p>HUAWEI Sound X 2021</p>    
                    <p>声声出色</p>
                </div>
  
            </div>
            <div class="three">
                <div class="title">
                    <p>产品</p>
                    <p>HUAWEI WATCH 3</p>    
                    <p>一表万象</p>
                </div>
            </div>
            <div class="four">
                <div class="title">
                    <p>产品</p>
                    <p>HUAWEI MatePad Pro</p>    
                    <p>创造无界</p>
                </div>
            </div>
            <div class="five">
                <div class="fifss-title">
                    <p>趋势洞察</p>
                    <p>跨越商业裂谷，共创5G新价值</p>    
                    <p>创新没有现成的向导，如何让5G更好地赋能千行百业？</p>
                </div>
            </div>
            <div class="six">
                <div class="fifss-title">
                    <p>产品</p>
                    <p>HUAWEI Sound X 2021</p>    
                    <p>声声出色</p>
                </div>
            </div>
            <div class="seven">
                <div class="fifss-title">
                    <p>产品</p>
                    <p>HUAWEI Sound X 2021</p>    
                    <p>声声出色</p>
                </div>
            </div>
            <div class="eight">
                <div class="ei-title">
                    <p >了解更多</p>
                </div>
            </div>
        </div>
    </div>
    <div class="news">
        <h2>新闻与活动</h2>
    </div>
    <div class="news-title">    
        <ul class="clearfix">
            <li>
                <div class="left-pic">
                </div>
                <div class="ta">
                    <h2>华为全联接2021</h2>
                    <p>线上大会</p>
                    <P>2021年9月23-25日</P><br>
                    <P>今年活动以“深耕数字化”为主题，
                    将在线上举办，提供全球直播和互动。
                    </P>        
                </div>
            </li>
            <li>
                <div class="mid-pic"></div>
                <div class="ta">
                    <h2>2021全球移动宽带论坛</h2>
                    <p>阿联酋，迪拜</p><br>
                    <p>2021年10月13-14日</p>
                </div>
            </li>
            <li class="right-pic">    
                <a href=""><h4>5G空域覆盖第一城，赋能厦门低空新产业</h4>
                <p>2021年09月08日</p><br></a>
                <a href=""><h4>华为签署系列合作协议，助力河南“整县推进”屋顶光伏发电</h4>
                <p>2021年09月07日</p><br></a>
                <a href=""><h4>华为在WCC2021大会公布与IUCNzaiTech4Nautre上的合作进展</h4>
                <p>2021年09月07日</p><br></a>
                <a href=""><h4>鲲鹏应用创新大赛2021圆满落幕</h4>
                <p>2021年09月06日</p></a>
            </li>
        </ul>
    </div>
    <!-- <div style="clear: both;"></div> -->
    <div class="button">
        <div class="act">
            <p>更多活动</p>
            
        </div>
        <div class="new">
            <p>更多新闻</p>
        </div>
    </div>
    <div class="bottom">
        <!-- 首页 -->
        <div class="one">
            <p>首页</p>
        </div>
        <!-- 列表浮动 做菜单 -->
        <div class="caidan clearfix" >
            <ul >
                <!-- 关于华为 -->
                <li>
                    <h3>关于华为</h3>
                </li>
                <!-- 新闻活动 -->
                <li>
                    <h3>新闻活动</h3>
                </li>
                <!-- 发现 -->
                <li>
                    <h3>发现</h3>
                </li>
                <!-- 我们的产品 -->
                <li>
                    <h3 class="produce">我们的产品</h3>
                </li>
                <!-- 技术支持 -->
                <li>
                    <h3 class="technical">技术支持</h3>
                </li>
            </ul>
        </div>
       <br><br>
      <center>
          <!-- center里面的内容全部居中 -->
          <!-- border 为1 的时候有边框 -->
          <!-- 表格 -->
        <table border="0" align="center">
            <tr>
                <td>公司简介</td>
                <td>新闻</td>
                <td>华为技术观察</td>
                <td>个人及家庭产品</td>
                <td>消费者技术支持</td>
            </tr>
            <tr>
                <td>可持续发展</td>
                <td>展会活动</td>
                <td>出版物</td>
                <td>企业业务产品</td>
                <td>华为云技术支持</td>
  
            </tr>
            <tr>
                <td>信任中心</td>
                <td>华为直播</td>
                <td> </td>
                <td>运营网络产品</td>
                <td>企业技术支持</td>
            </tr>
            <tr>
                <td>管理层信息</td>
                <td>媒体图库</td>
                <td> </td>
                <td>华为云服务</td>
                <td>运营商技术支持</td>
            </tr>
            <tr>
                <td>招贤纳士</td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td>产品安全通告</td>
            </tr>
            <tr>
                <td>供应商</td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
            <tr>
                <td>查看更多</td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
        </table>
      </center>
      <div class="xian">
      </div>
      <div style="clear: both;"></div>
      <div class="outer clearfix">
            <div class="dd">
                <ul>
                    <li>华为商城</li>
                    <li>华为云</li>
                    <li>华为智能光伏</li>
                    <li>产品定义社区</li>
                    <li>华为心声社区</li>
                </ul>
            </div>
            <div class="ff">
                <ul>
                    <li><img src="./img/微博.png"></li>
                    <li><img src="./img/in.png"></li>
                    <li><img src="./img/微信.png"></li>
                    <!-- alt  是图片的备注   -->
                    <li><img src="./img/头条.png" alt=""></li>
                    <li><img src="./img/知乎.png" alt=""></li>
                </ul>
            </div>
        </div>       
        <div class="end ">
            <div class="box1">
                <span id="one">
                    @2021 华为技术有限公司
                </span>
                <span id="tow">
                    <a href="">粤A2-20044005号</a>
                    <a href="">粤公网安备  44030702002388号</a>
                </span>
                <div class="line"></div>
            </div>
            <div class="box2">
                <ul>
                    <li>联系我们</li>
                    <li>法律声明</li>
                    <li>隐私保护</li>
                    <li>除名查询</li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>